<template>
  <div>
    <div id="nav">
      <div class="nav_top">
        <p class="p_1">查询</p>
      </div>
      <div class="nav_mid">
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="时间：">
            <el-date-picker v-model="formInline.customer_time"
                            type="datetimerange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            format="yyyy 年 MM 月 dd 日 hh 时 mm 分 ss 秒"
                            value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       class="search"
                       round
                       @click="onSearch">查询</el-button>
            <el-button type="primary"
                       round
                       class="search"
                       @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="nav_bottom clear">
      <p class="ziti">明细数据</p>
      <el-button type="info"
                 round
                 class="export"
                 @click="onExport">
        导出
      </el-button>
    </div>
    <el-table :data="tableData"
              stripe
              style="width: 100%"
              :cell-style="{border:'1px solid #DCDCDC'}"
              :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
      <el-table-column prop="customer_id"
                       label="序号"
                       width="190"
                       align='center'></el-table-column>
      <el-table-column width="225s"
                       prop="customer_name"
                       label="账号昵称"
                       align='center'></el-table-column>
      <el-table-column width="230"
                       prop="customer_time"
                       label="注册日期"
                       align='center'></el-table-column>
      <el-table-column width="210"
                       prop="cx_amount"
                       label="订单笔数"
                       align='center'></el-table-column>
      <el-table-column width="210"
                       prop="cx_money"
                       label="消费金额"
                       align='center'></el-table-column>
      <el-table-column width="210"
                       prop="cx_refund"
                       label="退单额"
                       align='center'></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handlePageChange"
                     :page-sizes="[5,10,15,20,25,30]"
                     :page-size="count"
                     layout="total,sizes,prev, pager, next, jumper"
                     :total="totalData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formInline: {
        customer_time: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      totalData: [],
      page: 1,
      count: 5,
      cx_refund: 0,
    };
  },
      methods: {
        getuser: function () {
            this.$axios({
                url: '/api/smallprogram/getsmallprogram'
            }).then((res) => {
                this.totalData=res.data.data
            })
        },
       // 每页多少条数据
    handleSizeChange(count) {
        this.count=count
    },
    // 分页
    handlePageChange (page) {
      this.page = page
    },
    onSearch() {
       if(!this.formInline.customer_time.length){
                this.formInline.customer_time=['','']
            }
            this.$axios({
                url:'/api/smallprogram/getsmallprogramid',
                params:this.formInline,
            }).then((res)=>{
                this.totalData=res.data.data
                this.page=1
            })
    },
    onReset () {
      this.formInline = {
        customer_time: "",
      }
      this.getuser();
    },
    onExport () {
      this.$alert('是否确认导出明细？', {
        title: '导出明细',
        callback: (action) => {
          if (action == 'confirm') {
            let datalist = [];
            datalist.push([
              "订单编号",
              "账号昵称",
              "注册时间",
              "订单笔数",
              "消费金额",
              "退单额"
            ]);
            this.tableData.forEach(item => {
              datalist.push([
                item.customer_id,
                item.customer_name,
                item.customer_time,
                item.cx_amount,
                item.cx_money,
                item.cx_refund
              ]);
            });
            this.$downloadXlsx(datalist, "订单信息明细数据.xlsx");
            this.$message({
              type: 'success',
              message: '导出成功!'
            });
          } else {
            this.$message({
              type: 'cancel',
              message: '已取消导出。'
            });
          }
        }
      });
    },
  },
  created: function () {
    this.getuser();
  },
  computed: {
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count);
    },
  }
}
</script>
<style scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
#nav {
  border: 1px solid rgba(242, 242, 242);
}
.nav_top {
  height: 50px;
  background-color: rgba(242, 242, 242);
  line-height: 50px;
}
.p_1 {
  margin: 0 0 0 20px;
}
.nav_mid {
  padding: 30px 0 2.2px 30px;
}
.el-date-editor {
  width: 350px;
}
.search {
  width: 80px;
  margin-left: 20px;
  height: 40px;
}
.nav_bottom {
  height: 50px;
  background-color: rgba(242, 242, 242);
  line-height: 50px;
  margin: 15px 0 15px 0;
}
.ziti {
  float: left;
  margin: 0 0 0 20px;
}
.export {
  width: 80px;
  float: right;
  margin-right: 35px;
  margin-top: 5px;
  height: 40px;
}
.block {
  text-align: center;
  margin-top: 50px;
}
.el-date-editor /deep/ .el-range-separator {
  padding: 0;
}
</style>
